<template>
  <div class="app-container">
    <div class="app-title">
      <span>银行路径</span>
    </div>
    <!-- 切换按钮 -->
    <el-row :gutter="20">
      <div class="filter-container">
        <div>
          <el-col
            style="text-align:right;margin-top: -8px;"
            :span="24   "
          >
          <el-button
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              @click="saveEdit"
            >
              新增
            </el-button>
            <el-button
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              @click="handleEdit"
            >
              编辑
            </el-button>
            <el-button
              size="small"
              class="filter-item"
              type="primary"
              :loading="deleteLoading"
              @click="deleteEdit"
            >
              删除
            </el-button>
          </el-col>
        </div>
      </div>
    </el-row>
    <div class="grid-content bg-purple" />
    <div
      ref="box"
      class="box"
    >
      <div
        class="mid"
        :class="[isActive ? 'mids': 'min']"
      >
        <!-- 表格部分 -->
        <el-table
          ref="singalTable"
          v-loading="listLoading"
          :height="tableHeight"
          :data="list"
          :stripe="true"
          fit
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          @cell-dblclick="editclick"
        >
          <template slot="empty">
            <tableEmpty />
          </template>
          <el-table-column type="selection" align="center" width="50" label="序号" />
          <el-table-column type="index" align="center" width="50" label="序号" />
          <el-table-column label="银行名称" align="center">
            <template slot-scope="{row}">
              <span >{{ row.bankName }}</span>
            </template>
          </el-table-column>
             <el-table-column label="报盘地址" align="center">
            <template slot-scope="{row}">
              <span >{{ row.uploadDirPath }}</span>
            </template>
          </el-table-column>
           <el-table-column label="回盘地址" align="center">
            <template slot-scope="{row}">
              <span >{{ row.downloadDirPath }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
      </div>
      <Drag ref="icon" />
    </div>
    <!-- 编辑页面部分 -->
    <el-dialog  v-dialogDrag  
      :close-on-click-modal="false"
      :title="dialogStatus"
      :visible.sync="dialogEditFormVisible"
      width="20%"
    >
      <el-form
        ref="dataForm"
        class="dialog-backgroundcolor"
        :rules="dataFormRules"
        :model="formData"
        label-position="right"
        label-width="100px"
      >
        <div class="editFormDeviation">
          <el-row>
            <el-col>
              <el-form-item
                label="银行名称:"
                prop="bankName"
                class="item-margin"
              />
            </el-col>
            <el-col>
              <el-select
                v-model="formData.bankName"
                value-key="code"
                class="filter-item"
                placeholder="--请选择--"
              >
                <el-option
                  v-for="item in agencyBankLists"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-col>
          </el-row>
           <el-row>
        
          </el-row>
          <el-row>
            <el-col>
              <el-form-item
                label="报盘地址："
                prop="uploadDirPath"
                class="item-margin"
                
              />
            </el-col>
              <el-col>
              <el-input
                v-model="formData.uploadDirPath"
              />
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item
                label="回盘地址:"
                prop="downloadDirPath"
                class="item-margin"
                
              />
            </el-col>
            <el-col >
              <el-input
                v-model="formData.downloadDirPath"
               
              />
            </el-col>
          </el-row>
        </div>
        <el-row>
          <el-col
            v-if="operate === 'edit'"
            style="text-align: center; margin-top:20px; margin-bottom:8px"
          >
            <el-button
              type="primary"
              :loading="saveLoading"
              @click="updateData()"
            >
              保存
            </el-button>
            <el-button @click="dialogEditFormVisible = false">
              取消
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 新增页面部分 -->
    <el-dialog  v-dialogDrag  
      :close-on-click-modal="false"
      :title="insetlog"
      :visible.sync="dialogEditFormVisibles"
      width="20%"
    >
      <el-form
        ref="dataForm"
        class="dialog-backgroundcolor"
        :rules="dataFormRules"
        :model="formDatas"
        label-position="right"
        label-width="100px"
      >
        <div class="editFormDeviation">
          <el-row>
            <el-col>
              <el-form-item
                label="银行名称:"
                prop="bankName"
                class="item-margin"
              />
            </el-col>
            <el-col>
              <el-select
                v-model="formDatas.bankName"
                value-key="code"
                class="filter-item"
                placeholder="--请选择--"
              >
                <el-option
                  v-for="item in agencyBankLists"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-col>
          </el-row>
           <el-row>
        
          </el-row>
          <el-row>
            <el-col>
              <el-form-item
                label="报盘地址："
                prop="uploadDirPath"
                class="item-margin"
                
              />
            </el-col>
              <el-col>
              <el-input
                v-model="formDatas.uploadDirPath"
              />
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item
                label="回盘地址:"
                prop="downloadDirPath"
                class="item-margin"
                
              />
            </el-col>
            <el-col >
              <el-input
                v-model="formDatas.downloadDirPath"
               
              />
            </el-col>
          </el-row>
        </div>
        <el-row>
          <el-col
            v-if="operate === 'edit'"
            style="text-align: center; margin-top:20px; margin-bottom:8px"
          >
            <el-button
              type="primary"
              :loading="insertLoading"
              @click="insertData()"
            >
              保存
            </el-button>
            <el-button @click="dialogEditFormVisibles = false">
              取消
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <Enclosure
      ref="enc"
      :middle-table-code="1"
    />
  </div>
</template>
<script>
import { queryFilePathPage , updateFilePath, saveFilePath, deleteFilePath} from '@/api/salaryConfigManage/filePathChildren'
import { getAgencyBank,  getAgencyAdmdep, getAgencyAgencyadmlevel } from '@/api/baseInfo'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import tableEmpty from '@/components/table/empty'
import Enclosure from '@/components/Enclosure'
import AgencyTree from '@/components/tree/agencyTree'
import Drag from '@/components/Drag'
export default {
  name: 'Unit',
  components: { Pagination, tableEmpty, Enclosure, AgencyTree, Drag },
  filters: {
    bankFilters(type, that) {
      const agencyBankLists = that.agencyBankLists
      for (const item in agencyBankLists) {
        if (agencyBankLists[item].code === type) {
          return agencyBankLists[item].name
        }
      }
    }
  },
  data() {
    return {
      treeHeight: null,
      isActive: true,
      Show: false,
      treeShow: false,
      treeData: '',
      tableHeight: null,
      selection: [],
      that: this,
      list: null,
      total: 0,
      listLoading: true,
      saveLoading: false,
      insertLoading:false,
      deleteLoading:false,
      listQuery: {
        page: 1,
        limit: 200,
        flag: 'all',
        agencyId: '0'
      },
      formDsiabled: false,
      operate: 'edit',
      agencyBankLists: [],
      formData: {
        id: '',
        bankCode: '',
        bankName: '',
        uploadDirPath: '',
        downloadDirPath: ''
      },
       formDatas: {
        id: '',
        bankCode: '',
        bankName: '',
        uploadDirPath: '',
        downloadDirPath: ''
      },
     
      operateAgencyLists: [],
      dialogEditFormVisible: false,
      dialogEditFormVisibles: false,
      viewFormVisible: false,
      dialogStatus: '',
      insetlog:'',
      dataFormRules: {
        bankName: [
          { required: true, message: '请输入银行名称', trigger: 'blur' }
        ],
        uploadDirPath: [
          { required: true, message: '请输入报盘地址', trigger: 'blur' }
        ],
        downloadDirPath: [
          { required: true, message: '请输入回盘地址', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    // 表格的数据数组
    list(val) {
      this.doLayout()
    }
  },
  created() {
    this.initBaseInfo()
    this.getList()
  },
  mounted() {
    this.getTbHeight()
    this.dragController()
  },
  beforeMount() {
    window.addEventListener('resize', this.getTbHeight)
  },
  methods: {
    // 拖拽
    dragController() {
      this.$refs.icon.dragControllerDiv()
    },
    handleTreeQuery(data) {
      this.treeData = data
      this.handleTree(data)
    },
    /* 重新渲染table组件 */
    doLayout() {
      this.$nextTick(() => {
        this.$refs.singalTable.doLayout()
      })
    },
    // 获取table高度的方法
    getTbHeight() {
      this.tableHeight = window.innerHeight - 215
      this.treeHeight = this.tableHeight
    },
    editclick(row, column, event, cell) {
      this.dialogStatus = '银行信息修改'
      this.insetlog = '银行信息新增'
      this.dialogEditFormVisible = true
      this.dialogEditFormVisibles = true
      this.formData = row
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    getList() {
      this.listLoading = true
      queryFilePathPage(this.listQuery).then(response => {
        const rows = response.data.rows
        this.list = rows
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleTree(data) {
      this.listQuery.agencyId = data.id
      this.getList()
      // if (!Object.prototype.hasOwnProperty.call(data, 'children')) {
      // }
    },
    saveEdit(){
      //新增后清除
       this.restetFormDatas()
       this.dialogStatus = '银行信息修改'
       this.dialogEditFormVisibles = true
    },
    insertData(){
         // this.$refs['dataForm'].validate((valid) => {
            const tempDatas = Object.assign({}, this.formDatas)
            if(tempDatas.bankName==''||tempDatas.uploadDirPath==''||tempDatas.downloadDirPath==''){
              this.$message({
                                showClose: true,
                                message: '请填写完整',
                                type: 'warning',
                                duration: 4000
                              })
                              this.insertLoading = false
                              return
            }
        // if (valid) {
              this.insertLoading = true
               for(const item in this.list){
                 console.log(this.list)
                   console.log(tempDatas.bankName)
                   if(this.list[item].bankCode===tempDatas.bankName){
                              this.$message({
                                showClose: true,
                                message: '银行已存在',
                                type: 'warning',
                                duration: 4000
                              })
                              this.insertLoading = false
                              return
                      }
               }
                for (const item in this.agencyBankLists) {
                if (this.agencyBankLists[item].code === tempDatas.bankName) {
                      tempDatas.bankName = this.agencyBankLists[item].name
                      tempDatas.bankCode = this.agencyBankLists[item].code
                }
              }
              saveFilePath(tempDatas).then((response) => {
                  this.dialogEditFormVisibles = false
                        this.$message({
                        showClose: true,
                        message: '保存成功',
                        type: 'success',
                        duration: 4000
                      })
                      this.insertLoading = false
                      this.handleFilter()
                    }).catch(() => {
                      this.insertLoading = false
                    })
       // }
     // })
    },
    // 编辑
    handleEdit() {
      const selection = this.$refs.singalTable.selection
      if (selection.length !== 1) {
        this.$message({
          showClose: true,
          message: '请选择要修改的条数',
          type: 'warning',
          duration: 4000
        })
        return
      }
      this.dialogStatus = '银行信息修改'
      this.dialogEditFormVisible = true
      this.formData = Object.assign({}, this.formData, selection[0])
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 保存
    updateData() {
    //  this.$refs['dataForm'].validate((valid) => {
        //if (valid) {
           const tempData = Object.assign({}, this.formData)
           if(tempData.bankName==''||tempData.uploadDirPath==''||tempData.downloadDirPath==''){
              this.$message({
                showClose: true,
                message: '请填写完整',
                type: 'warning',
                duration: 4000
              })
              this.insertLoading = false
              return
            }
            this.saveLoading = true
              updateFilePath(tempData).then((response) => {
                  this.dialogEditFormVisible = false
                        this.$message({
                        showClose: true,
                        message: '保存成功',
                        type: 'success',
                        duration: 4000
                      })
                      this.saveLoading = false
                      this.handleFilter()
                    }).catch(() => {
                      this.saveLoading = false
                    })
       // }
     // })
    },
    //删除
    deleteEdit(){
      const selection = this.$refs.singalTable.selection
      if (selection.length !== 1) {
        this.$message({
          showClose: true,
          message: '请选择一条删除',
          type: 'warning',
          duration: 4000
        })
        return
      }
      // this.deleteLoading = true
      // const operate = []
      // selection.forEach(item => {
      //   operate.push(item.id)
      // })
      const operate = selection[0]
      this.$confirm('确定删除吗?', '提示', {
        closeOnClickModal: false,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteFilePath(operate).then((response) => {
          this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success',
            duration: 4000
          })
          this.handleFilter()
          this.deleteLoading = false
        }).catch(() => {
          this.deleteLoading = false
        })
      }).catch(() => {
        this.deleteLoading = false
      })
    },
  
    initBaseInfo() {
      getAgencyBank().then((response) => {
        this.agencyBankLists = Object.assign({}, response.data)
      })
    },
    restetFormDatas(){
        this.formDatas = {
          id: '',
        bankCode: '',
        bankName: '',
        uploadDirPath: '',
        downloadDirPath: ''
        
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .editFormDeviation {
    margin-left: 10%;
  }
  .viewFormDeviation {
    margin-left: 6%;
  }
  ::v-deep .el-select {
    .el-input {
      height: auto !important;
    }
  }
  .payment{
    margin-left: 17px;
  }
</style>
